import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' //node.js的模块

export default defineConfig({
    plugins: [vue()],
    base: process.env.NODE_ENV == 'production' ? 'processflow' : '',
    // 如果production写'/'，那么最终打包生成的index.html请求所有的静态资源路径都会以/开头=>>/favicon.ico  在拼上ip和端口,最终的请求地址=>192.168.1.111:8080/favicon.io
    // 如果production写'./'，那么最终打包生成的index.html请求所有的静态资源路径都会以/开头=>>./favicon.ico  './'等价于index.html的绝对路径=>192.168.1.111:8080/${包名}/favicon.ico  √
    // 如果production写'/eventcenter'，那么最终打包生成的index.html请求所有的静态资源路径都会以/eventcenter开头=>>/eventcenter/favicon.ico 在拼上ip和端口,=>192.168.1.111:8080/eventcenter/favicon.ico   这样就需要把包名改成eventcenter
    // 如果production写'eventcenter'，等同于'/eventcenter'
    resolve: {
        extensions: ['.js','.vue', '.jsx', ],
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    esbuild: {//如果报react is not defined 可以添加这个，如果不报，那么可以不加，（与vue版本有关）
      jsxFactory: 'h',
       jsxFragment: 'Fragment',
     },
    css: {
      // 🔥此处添加全局scss🔥
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/css/mixin.scss";`,// 全局引入
          charset: false,// 避免出现: build时的 @charset 必须在第一行的警告
        }
      }
    },
    server: {
        cors: true, // 默认启用并允许任何源
        open: true, // 在服务器启动时自动在浏览器中打开应用程序
        // host: "192.168.1.117",
         port: 3001,
        //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
        host: true,
        proxy: { 
            //    仅在开发环境有效，原理就是vite使用createProxyMiddleware生成一个虚拟的服务器，
            //    一般在axios的baseurl里加上'/api',这样配合使用
            //    虚拟的服务器反向代理了target的源服务器 ，这样消除了跨域问题
            // '/api': {
            //     target: 'http://192.168.1.83:3000', //代理接口
            //     changeOrigin: true,
            //     rewrite: (path) => path.replace(/^\/api/, '')
            // }
        }
    }
})